<template>
  <view class="container" :class="{'fixed':isFixed}">
    <view class="status-bar" :style="{ backgroundColor:statusBarBgColor}"></view>
    <view class="back-bar" :style="{ borderBottom:backBarBorder,backgroundColor:backBarBgColor}">
      <view v-if="isTitle" class="title">{{ title }}</view>
      <image class="go-back" :src="goBackImgSrc" @click="goBack"/>
      <view class="right">
        <slot name="right"></slot>
      </view> 
    </view>
  </view>
  
</template>
<script setup>
	// import { useSystemInfoStore } from '@/stores/systemInfo'
	// const {statusBarHeight} = useSystemInfoStore()

  const props = defineProps({
    statusBarBgColor: {
      type: String,
      default: '#FFF'
    },
    // 确保有些页面的返回icon颜色不一样
    goBackImgSrc: { 
      type: String,
      default: '../../static/go-back.svg'
    },
    isTitle: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    backBarBorder:{
      type: String,
      default: 'none'
    },
    backBarBgColor:{
      type: String,
      default: '#FFF'
    },
    isFixed:{
      type: Boolean,
      default: true
    }
  })

  const goBack = () => {
    uni.navigateBack({ delta: 1 })
  }

</script>

<style lang="scss" scoped>
  .container{
    width: 100% !important;
    height: calc(var(--status-bar-height) + 90rpx) !important;

    .status-bar{
      width: 100%;
      height: var(--status-bar-height);
    }

    .back-bar{
      width: 100%;
      height: 90rpx;
      box-sizing: border-box;
      position: relative;

      .title{
        width: 100%;
        height: 90rpx;
        @include flex();
      }

      .go-back{
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        top: 25rpx;
        left: 30rpx;
      }
      .right{
        width: auto;
        height: 90rpx;
        position: absolute;
        top: 0;
        right: 30rpx;
        @include flex();
      }
      // .img-hide{
      //   opacity: 0;
      // }
    }

  }

  .fixed{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }
  
</style>
